Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 2828 1828" class="ww">
	<defs>
		<mask id="m">
			<rect height="100%" width="100%" />
			<circle id="maskCircle" cx="-300" cy="-300" r="200" fill="white" />
		</mask>
		<linearGradient id="magnifyHandle" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(60)">
			<stop offset="0%" stop-color="#ccc"/>
			<stop offset="50%" stop-color="#aaa"/>
			<stop offset="100%" stop-color="#ccc"/>
		</linearGradient>
		<radialGradient id="magnifyLens">
			<stop offset="85%" stop-color="rgba(250,250,250,0)"/>
			<stop offset="95%" stop-color="rgba(250,250,250,0.5)"/>
			<stop offset="98%" stop-color="rgba(250,250,250,0.5)"/>
			<stop offset="100%" stop-color="#111"/>
		</radialGradient>
		<radialGradient id="magnifyLensFound">
			<stop offset="85%" stop-color="rgba(50,250,50,0)"/>
			<stop offset="95%" stop-color="rgba(50,250,50,0.5)"/>
			<stop offset="98%" stop-color="rgba(50,250,50,0.5)"/>
			<stop offset="100%" stop-color="rgba(50,225,50,1)"/>
		</radialGradient>
		<image id="imgg" width="2828" href="https://miro.medium.com/v2/resize:fit:4800/format:webp/1*7v_75ZGg1CTmWAw1rEgMHQ.jpeg" />
	</defs>
	<use href="#imgg"/>
	<g mask="url(#m)">
		<use id="zoomUse" x="0" y="0" href="#imgg" filter="hue-rotate(10deg)" transform="scale(2)"  />
	</g>
	<circle id="mag1" cx="-300" cy="-300" r="210" stroke="url(#magnifyLens)" stroke-width="50" fill="none" />
	<circle id="mag0" cx="-300" cy="-300" r="220" stroke="#111" stroke-width="10" fill="none" stroke-linejoin="round" transform="rotate(45)">
		<animate attributeName="stroke-dasharray" values="0; 180; 0" dur="5s" begin="0s" repeatCount="indefinite" keyTimes="0;0.5;1" keySplines="0.9 0.1 0.1 0.9; 0.9 0.1 0.1 0.9" calcMode="spline" />
	</circle>
	<path id="mag2" d="M -200 -200 l100 100" stroke-width="65" stroke="#111" stroke-linecap="round" fill="none"/>
	<path id="mag3" d="M -200 -200 l100 100" stroke-width="50" stroke="url(#magnifyHandle)" stroke-linecap="round" fill="none"/>
</svg>

</body>
</html>

console.log("Event Fired")
function isWithinDistance(x, y, d=80, xx=2140, yy=1395) {
	const distance = Math.sqrt((x - xx) ** 2 + (y - yy) ** 2);
	return distance <= d;
}
// Create an SVGPoint for future math
let pt = new DOMPoint();
let mult = 2;
// Get point in global SVG space
function cursorPoint(evt) {
	pt.x = evt.clientX;
	pt.y = evt.clientY;
	return pt.matrixTransform(svg.getScreenCTM().inverse());
}
let xx, yy = 0;
function moveCircle(evt) {
	let loc = cursorPoint(evt);
	let mc = document.querySelector("#maskCircle");
	let mag0 = document.querySelector("#mag0");
	let mag1 = document.querySelector("#mag1");
	let mag2 = document.querySelector("#mag2");
	let mag3 = document.querySelector("#mag3");
	let bigImg = document.querySelector('#zoomUse');
	xx = loc.x - (mult * loc.x);
	yy = loc.y - (mult * loc.y);
	bigImg.setAttribute('transform', `translate(${xx} ${yy}) scale(${mult})`);
	mc.setAttribute("cx", loc.x);
	mc.setAttribute("cy", loc.y);
	mag0.setAttribute("cx", loc.x);
	mag0.setAttribute("cy", loc.y);
	mag0.setAttribute("transform", `rotate(45 ${loc.x} ${loc.y})`);
	mag1.setAttribute("cx", loc.x);
	mag1.setAttribute("cy", loc.y);
	let foundWaldo = isWithinDistance(loc.x, loc.y, 100/mult);
	foundWaldo ? mag0.setAttribute('stroke', '#afa') : mag0.setAttribute('stroke', '#111');
	foundWaldo ? mag1.setAttribute('stroke', 'url(#magnifyLensFound)') : mag1.setAttribute('stroke', 'url(#magnifyLens)');
	mag2.setAttribute("d", `M${loc.x + 171} ${loc.y + 171}l100 100`);
	mag3.setAttribute("d", `M${loc.x + 171} ${loc.y + 171}l100 100`);
}

// Function to handle zoom
function handleZoom(event) {
    event.preventDefault();

// Calculate the zoom factor based on the scroll wheel delta
    const zoomFactor = event.deltaY;
    if (zoomFactor >= 0) {
        mult += 0.5;
    } else {
        mult -= 0.5;
    }

// Update the slider value
    zoomSlider.value = mult.toFixed(1);

// Ensure the zoom level stays within the limits
    if (mult < 1.5) {
        mult = 2;
    } else if (mult > 10) {
        mult = 10;
    }
    moveCircle(event);
}

// Add wheel event listener to handle zoom
svg.addEventListener("wheel", handleZoom);

// Add event listener to slider
const zoomSlider = document.getElementById('zoomSlider');

zoomSlider.addEventListener('input', () => {
  mult = parseFloat(zoomSlider.value);
});

Frontend Forever App